<template>
    <el-container style="height: 100vh;">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246);">
            <el-menu router :default-openeds="['1', '3']" >
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-view"></i>内容管理</template>
                    <el-menu-item-group>
                        <el-menu-item index="/categories/create">新建分类</el-menu-item>
                        <el-menu-item index="/categories/list">分类列表</el-menu-item>
                    </el-menu-item-group>

                </el-submenu>

                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-view"></i>内容管理</template>
                    <el-menu-item-group>
                        <el-menu-item index="/categories/create">新建分类</el-menu-item>
                        <el-menu-item index="/categories/list">分类列表</el-menu-item>
                    </el-menu-item-group>

                </el-submenu>

            </el-menu>
        </el-aside>

        <el-container>
            <el-header height="100px">

                <div>
                    <el-breadcrumb separator="/" style="margin: 15px">
<!--                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>-->
                        <el-breadcrumb-item>商标分类管理</el-breadcrumb-item>
                        <el-breadcrumb-item>行业分类管理</el-breadcrumb-item>
                    </el-breadcrumb>

                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-form-item>
                            <el-input v-model="formInline.name" placeholder="分类名称"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="formInline.status" placeholder="分类状态">
                                <el-option label="正常" value=0></el-option>
                                <el-option label="热门" value=1></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                        </el-form-item>
                        <el-form-item style="margin-left: 100px">
                            <el-button type="primary" @click="onSubmitadd">新增</el-button>
                        </el-form-item>
                    </el-form>
                </div>

            </el-header>


            <el-main>

                <el-table
                        :data="tableData"
                        style="width: 100%">
                    <el-table-column
                            prop="id"
                            label="序号"
                            width="120" align="center">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="行业名称"
                            width="150" align="center">
                    </el-table-column>
                    <el-table-column
                            prop="icon"
                            label="icon"
                            width="180" align="center">
                        <template   slot-scope="scope">
                            <img :src="scope.row.icon"  min-width="40" height="40" />
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="id"
                            label="排序"
                            width="150" align="center">
                    </el-table-column ><el-table-column
                        prop="status"
                        label="状态"
                        width="180">
                    <template slot-scope="scope">
                        <p v-if="tableData[scope.$index].status==0">正常</p>
                        <p v-if="tableData[scope.$index].status==1">热门</p>
                    </template>
                </el-table-column>

                    <el-table-column
                            prop="doing"
                            label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>


            </el-main>
            <div class="block" style="padding: 30px">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :page-size="pageSize"
                        :total="total"
                        @current-change="page">
                </el-pagination>
            </div>
        </el-container>
    </el-container>




</template>

<script>
    import axios from "axios";
    export default {
        data() {
            return {
                pageSize:'1',
                total:'11',
                formInline: {
                    name: null,
                    status: null
                },
                tableData: [{
                    id: '2016-05',
                    name: '王小虎',
                    icon: '上海市普陀区金沙江路 '
                }, {
                    id: '2016-05-04',
                    name: '王小',
                    icon: '上海市普陀区金沙江路 1517 弄'
                }]
            }
        },
        created() {
            let _this = this
            axios.get('http://localhost:8081/listAll/1/4').then(function (response) {
                console.log(response.data.content[1].name)
                _this.tableData = response.data.content
                _this.total = response.data.totalElements
                _this.pageSize = response.data.size

            })
        },


        methods: {
            onSubmit() {
                const _this = this
               if(this.formInline.name && !this.formInline.status)
                    axios.get('http://localhost:8081/findclassname/'+ this.formInline.name).then(function(resp){
                        console.log(resp)
                        _this.tableData = resp.data
                    })
                else if(!this.formInline.name && this.formInline.status)
                    axios.get('http://localhost:8081/findclassstatus/'+ this.formInline.status).then(function(resp){
                        console.log(resp)
                        _this.tableData = resp.data
                    })
                else
                    axios.get('http://localhost:8081/findclass/'+ this.formInline.name +"/"+ this.formInline.status).then(function(resp){
                        console.log(resp)
                        _this.tableData = resp.data
                    })
                console.log('submit!');
            },
            onSubmitadd() {
                this.$router.push({path: "/about/add"})
                console.log('submit!add');
            },
            handleEdit(index, row) {
                this.$router.push({path: "/about/edit",query: {id: row.id}})
                console.log(index, row);
            },
            handleDelete(index, row) {
                const _this = this
                axios.get('http://localhost:8081/deleteOne/'+row.id).then(function(resp){
                    _this.$alert('《'+row.name+'》删除成功！', '消息', {
                        confirmButtonText: '确定',

                    })
                    console.log(resp);
                    window.location.reload()
                })
            },
            page(currentPage){
                const _this = this
                axios.get('http://localhost:8081/listAll/'+currentPage+'/4').then(function(resp){
                    console.log(resp)
                    _this.tableData = resp.data.content
                    _this.pageSize = resp.data.size
                    _this.total = resp.data.totalElements
                })
            }
        },

    };
</script>
<style scoped>

    .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        color: #333;
    }

</style>